<template>
  <div class="imginfo">
    <h3>{{imginfo.title}}</h3>
    <p class="time">
      <span>发表时间：{{imginfo.add_time|gettime}}</span>
      <span>点击量：{{imginfo.click}}</span>
    </p>
    <hr>

    <!-- 缩略图:使用插件 在GitHub上搜索vue-preview，然后点击LS1231/vue-preview看下面文档
      1、安装 npm i vue-preview -S
    2、注册 import VuePreview from 'vue-preview'     Vue.use(VuePreview)-->
    <div class="smallimg">
      <!-- 第三步：使用，注意设置slide1变量值包括四个src、msrc、w、h 初始化handleClose方法 -->
      <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    </div>

    <!-- 内容区：必须使用v-html，因为可以解析html标签 -->
    <div class="content" v-html="imginfo.content"></div>
    <!-- 评论区：单独一个评论子组件，因为多处用到评论 
      1、新建一个子组件
      2、父组件中引入
      3、定义为组件
    4、调用子组件-->
    <!--第一步 父组件向子组件传值，使用v-bind -->
    <comment v-bind:id="id"></comment>
  </div>
</template>
<script>
// 第二步，引入子组件
import comment from "../pubcom/comment.vue";
export default {
  data() {
    return {
      // 接收路由通过url传递过来的参数,不要忘了this
      id: this.$route.params.id,
      imginfo: {},
      slide1: []
    };
  },
  created() {
    this.getimginfo();
    this.getSmallImg();
  },
  methods: {
    // 请求新闻详情
    getimginfo() {
      this.$http.get(`api/getimageInfo/${this.id}`).then(res => {
        // console.log(res.body);
        this.imginfo = res.body.message[0];
      });
    },
    // 缩略图的方法
    handleClose() {
      console.log("close event");
    },
    getSmallImg() {
      this.$http.get("api/getthumimages/" + this.id).then(res => {
        this.slide1 = res.body.message;
        // 循环数组，补齐属性
        this.slide1.forEach(element => {
          (element.msrc = element.src), (element.w = 600), (element.h = 400);
        });
        // console.log(this.slide1);
      });
    }
  },
  components: {
    // 第三步：注册为组件
    comment
  }
};
</script>
// bug：如果设置样式不生效，去掉scroped
<style lang="less" >
.imginfo {
  padding: 5px;
  h3 {
    font-size: 14px;
    color: rgb(20, 20, 20);
    text-align: center;
  }
  .time {
    display: flex;
    justify-content: space-between;
    color: rgb(12, 177, 177);
    margin: 10px 5px;
  }
  p {
    color: rgb(54, 53, 53);
  }
  .my-gallery {
    display: flex;
    // justify-content: s;
    flex-wrap: wrap;
    // margin-right: 10px;
    figure {
      width: 33%;
      margin: 0;
      padding: 3px;
      img {
        width: 100%;
      }
    }
  }
}
</style>